$(function () {
  class Pagination {

    constructor() {
      this.container = $('.goods_list .list')
      this._pagination = $('.pagination')
      this.data={}

      this.datas = null;
      //每一页展示的数据
      this.sum = null
      //每一页的起始下标
      this.start = 0;
      this.getDatas()
      this.bindEvent();
    }
    getDatas() {
      let options = {
        url: '../../static/data/recommand/recommand.json'
      }
      axios(options).then(res => {
        this.datas = res.data
        this.pagination(this.datas,8)
      })
    }

    //data_num是要分成几页
    pagination(data, data_num = 10) {
      
      this.sum = data.length / data_num;
      this.data_num = data_num
      this.renderDatas(data);
      this.renderBullets();
    }

    renderDatas(data) {
      this.container.html('')
      console.log(data);
      for (let i = this.start; i < this.sum + this.start; i++) {
        this.container.append(`
        <li class='product' data-id=${data[i].id}>
        <div class='product-iWrap'>
          <div class='productImg-wrap'>
            <img class='lozad' data-src='${data[i].imgUrl}'>
          </div>
          <div class='productPrice'>
            <em>${data[i].price}</em>
            <img data-src='https://tmallfans.cn-hangzhou.oss-pub.aliyun-inc.com/pifu/files/110363/20180912021209.png'>
          </div>
          <div class='productTitle'>${data[i].title}</div>
        </div>
      </li>
        `)
      }
      const observer = lozad();
      observer.observe();
    }
    renderBullets() {
      for (let i = 0; i < this.data_num; i++) {
        this._pagination.append(`
          <div class='bullets'>${i + 1}</div>
        `)
      }

    }


    bindEvent() {
      this._pagination.on('click', '.bullets', (e) => {
        this.start = (Number(e.target.innerHTML) - 1) * this.sum
        this.renderDatas(this.datas);
        console.log(this.start);
      })
      $('.fSort .icon_one').on('click', () => {
        this.datas.sort((a, b) => {
          return Number(a.price) - Number(b.price)
        })
        console.log(this.datas);
        this.renderDatas(this.datas);
      })
      $('.fSort .icon_two').on('click', () => {
        this.datas.sort((a, b) => {
          return Number(b.price.split('.')[0]) - Number(a.price.split('.')[0])
        })
        this.renderDatas(this.datas);
      })

      this.container.on('click', '.product', (e) => {
        // console.log(e.target.parentNode);
        let ms = $(e.target).parents('.goods_list .list .product')
        console.log(ms.attr('data-id'));
        this.data.src = $(ms).find('.lozad').attr('src')
        this.data.title = $(ms).find('.productTitle').html()
        this.data.price = $(ms).find('.productPrice em').html()
        location.href = '../../dist/goods-details.html#id=' + encodeURI(JSON.stringify(this.data))
      })
    }
  }

  new Pagination();

  class Index {
    constructor() {
      this.defaultmsg = $('.nav-head .defaultmsg')
      this.showmsg = $('.showmsg')
      this.nickname = $('.showmsg .nickname')
      this.quitbtn = $('.showmsg .quit')
      this.id = cookie('ID');
      this.token = cookie('Token');
      if (this.id.length > 0 && this.token.length > 0) {
        this.defaultmsg.css({
          display: 'none'
        })
        this.showmsg.css({
          display: 'block'
        })
        this.getUserInfo()
      }

      this.bindEvent()
    }

    getUserInfo() {
      let options = {
        url: 'http://localhost:8888/users/info/' + this.id,
        headers: {
          "authorization": this.token
        }

      }

      $.ajax(options).then(res => {
        this.render(res)
      })
    }

    render(res) {
      this.nickname.text(res.info.nickname);
    }
    quitUser() {
      let options = {
        url: 'http://localhost:8888/users/logout/' + this.id,
      }

      $.ajax(options).then(res => {
        console.log('退出账户成功');
        cookie('ID', null)
        cookie('Token', null)
        setTimeout(() => {
          location.reload()
        }, 500)
      })
    }
    bindEvent() {
      this.quitbtn.on('click', () => {
        this.quitUser()
      })
    }
  }
  new Index();


})
$(function(){
  

})